<template>
	<view class="position-select">
		<view class="left-container">
			<scroll-view scroll-y="true">
				<view
					class="item"
					:class="{ active: index === leftIndex }"
					v-for="(item, index) in positionList"
					:key="item.id"
					@click="leftIndex = index"
				>
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="right-container">
			<scroll-view scroll-y="true">
				<view
					class="item"
					v-for="(row, index) in positionList[leftIndex].children"
					:key="row.id"
					@click="handleSelectPosition(row)"
				>
					<text>{{ row.name }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getPositionList } from '@/apis/job/index.js';

export default {
	data() {
		return {
			positionList: [],
			jumpSearch: false, // 跳转搜索页
			leftIndex: 0
		};
	},
	onLoad(option) {
		if (option.search == 1) {
			this.jumpSearch = true;
		}
	},
	mounted() {
		this.initData();
	},
	methods: {
		async initData() {
			const res = await getPositionList({ page: 1, size: 999 });
			this.positionList = res.data.list;
		},
		// 选择岗位
		handleSelectPosition(value) {
			if (this.jumpSearch) {
				uni.navigateTo({ url: `/pages/index/search?name=${value.name}&id=${value.id}` });
			} else {
				uni.$emit('position:select', { id: value.id, name: value.name });
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.position-select {
	display: flex;
}

.left-container {
	width: 250rpx;
	height: 100vh;
	border-right: 1px solid #ebeef5;
	.item {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		&.active {
			color: $main-color;
			background-color: #f3f4f6;
		}
	}
}
.right-container {
	width: 524rpx;
	padding: 30rpx;
	.item {
		display: inline-block;
		width: 46%;
		line-height: 70rpx;
		text-align: center;
		border-radius: 6rpx;
		background-color: #f3f4f6;
		margin-bottom: 30rpx;
		&:nth-child(odd) {
			margin-right: 30rpx;
		}
	}
}
</style>
